<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>模拟画笔效果</title>
</head>
<body>
<script type="text/javascript">
    var ballW = 10,ballH = 10;
    document.onmouseup = function(evt){
        var evt=evt?evt:window.event;
        var posX=evt.clientX;
        var posY=evt.clientY;
        var newDiv=document.createElement("div");
        document.body.appendChild(newDiv);
        newDiv.style.width=ballW+"px";
        newDiv.style.height=ballH+"px";
        newDiv.style.backgroundColor="#000";
        newDiv.style.position="absolute";
        newDiv.style.left=posX-(ballW/2)+"px";
        newDiv.style.top=posY-(ballH/2)+"px";

    }
</script>
</body>
</html>